<template>
  <div>
    <ul class="tab-head">
      <li class="tab-head-item">
        <router-link to="">推荐</router-link>
      </li>
      <li class="tab-head-item">
        <router-link to="" tag="li">热点</router-link>
      </li>
      <li class="tab-head-item">
        <router-link to="" tag="li">北京</router-link>
      </li>
      <li class="tab-head-item">社会</li>
      <li class="tab-head-item">娱乐</li>
      <li class="tab-head-item">科技</li>
    </ul>
    <!-- 图片加载区域 -->
    <div class="photo-list">
      <router-link to= "/home/photolis/photoinfo" tag="div">
      <!-- 缺少懒加载 -->
        <img src="../../images/Sunrise.jpg" alt="" />
      </router-link>
      <div class="photo-word">
        <div class="photo-title">风景图</div>
        <div class="photo-content">
          京口瓜州一水间，钟山只隔数重山。春风又绿江南岸，明月何时照我还？
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.tab-head {
  list-style-type: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0;
  overflow: auto;
  margin: 4px 4px;
  //   scrollbar-face-color: #fff;
  //   scrollbar-base-color: #fff;
  //   scrollbar-track-color: #fff;
}
.tab-head::-webkit-scrollbar {
  display: none;
}

.tab-head-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  color: #000 !important;
  padding: 0 20px;
  font-size: 14px;
}
.photo-list {
  margin: 2px 4px;
  background-color: #ccc;
  box-shadow: 2px 2px 3px #ccc;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .photo-word {
    position: absolute;
    bottom: 4px;
    background-color: rgba(#ccc, 0.2);
    margin: 2px 2px;
    .photo-title {
      font-size: 14px;
    }
    .photo-content {
      font-size: 12px;
    }
  }
}
</style>